<template>
  <module :code-str="codeStr" :code-desc="codeDesc">
    <template #moduleName>Modal基础用法</template>
    <template #moduleDesc></template>
    <template #moduleComponent>
      <parent />
    </template>
  </module>
</template>

<script>
import Parent from './childComp/Parent'

export default {
  alias: "V1ModalBasicDemo",
  components: {
    Parent
  },
  data() {
    return {
      codeStr: `
// 父组件      
<template>
  <h-container>
    <h-main>
      <h-modal v-model="showModal" title="prop title" :emit-handler="showInfo">
        <template #header><span style="color: red">自定义header</span></template>
        <template #footer><child-footer /></template>
        <h-row><h-input placeholder="姓名" v-model="info.name"></h-input></h-row><br />
        <h-row><h-input type="number" min="1" maxlength="3" placeholder="年龄" v-model="info.age"></h-input></h-row>
      </h-modal>
      <h-button type="primary" @click="showModal = true">打开模态框</h-button>
    </h-main>
  </h-container>
</template>

<script>
import ChildFooter from "./ChildFooter";

export default {
  components: {
    ChildFooter,
  },
  data() {
    return {
      showModal: false,
      info: {
        name: '',
        age: null,
      }
    }
  },
  methods: {
    showInfo() {
      console.log(this.info)
      this.$msgbox(\`姓名：\${this.info.name}，年龄：\${this.info.age}\`)
    }
  }
};
<\/script>

// 子组件
<template>
  <h-container>
    <h-flex row>
      <h-button @click="closeModal">关闭模态框</h-button>
      <h-button @click="emitModal()">提交</h-button>
      <h-button @click="resetModal">重置模态框位置</h-button>
    </h-flex>
  </h-container>
<\/template>

<script>
export default {
  inject: ["closeModal", "emitModal", "resetModal"],
};
<\/script>
      `,
      codeDesc: "",
      showModal: false,
    };
  },
};
</script>

<style>
</style>